<script setup>
import { onMounted } from 'vue'
import * as echarts from 'echarts'
//用户登录信息
const userStr = localStorage.getItem('user')
const user = JSON.parse(userStr)
//章节学习情况分析
const chart = () => {
  var chartDom = document.getElementById('myChart')
  var myChart = echarts.init(chartDom)
  var option

  option = {
    xAxis: {
      type: 'category',
      data: ['第一章', '第二章', '第三章', '第四章', '第五章', '第六章', '第七章']
    },
    yAxis: {
      type: 'value'
    },
    series: [
      {
        data: [100, 20, 70, 90, 40, 90, 70],
        type: 'line'
      }
    ]
  }

  option && myChart.setOption(option)
}

//考试情况分析
const chart2 = () => {
  var chartDom = document.getElementById('myChart2')
  var myChart = echarts.init(chartDom)
  var option

  option = {
    legend: {
      top: 'bottom'
    },
    toolbox: {
      show: true
    },
    series: [
      {
        name: 'Nightingale Chart',
        type: 'pie',
        radius: [50, 250],
        center: ['50%', '50%'],
        roseType: 'area',
        itemStyle: {
          borderRadius: 8
        },
        data: [
          { value: 100, name: 'A级' },
          { value: 92, name: 'B级' },
          { value: 89, name: 'C级' },
          { value: 77, name: 'D级' },
          { value: 68, name: 'E级' },
          { value: 57, name: 'F级' },
          { value: 35, name: 'G级' }
        ]
      }
    ]
  }

  option && myChart.setOption(option)
}

//讨论情况分析
const chart3 = () => {
  var chartDom = document.getElementById('myChart3')
  var myChart = echarts.init(chartDom)
  var option

  option = {
    xAxis: {
      type: 'category',
      boundaryGap: false
    },
    yAxis: {
      type: 'value',
      boundaryGap: [0, '30%']
    },
    visualMap: {
      type: 'piecewise',
      show: false,
      dimension: 0,
      seriesIndex: 0,
      pieces: [
        {
          gt: 1,
          lt: 3,
          color: 'rgba(0, 0, 180, 0.4)'
        },
        {
          gt: 5,
          lt: 7,
          color: 'rgba(0, 0, 180, 0.4)'
        }
      ]
    },
    series: [
      {
        type: 'line',
        smooth: 0.6,
        symbol: 'none',
        lineStyle: {
          color: '#5470C6',
          width: 5
        },
        markLine: {
          symbol: ['none', 'none'],
          label: { show: false },
          data: [{ xAxis: 1 }, { xAxis: 3 }, { xAxis: 5 }, { xAxis: 7 }]
        },
        areaStyle: {},
        data: [
          ['2023-1-10', 100],
          ['2023-2-11', 260],
          ['2023-3-12', 350],
          ['2023-5-13', 580],
          ['2024-1-14', 650],
          ['2024-5-15', 200],
          ['2024-6-16', 150]
        ]
      }
    ]
  }

  option && myChart.setOption(option)
}
onMounted(() => {
  chart(), chart2(), chart3()
})

//跳转到练习页面
const show = () => {
  window.open('https://www.examcoo.com/editor/do/exam/id/120557')
}
</script>
<template>
  <div>
    <div>
      <el-card class="my-header">
        <div class="left">
          <img class="my-img" src="/src/assets/head1.jpeg" alt="" />
          <span class="my-name">{{ user.username }}</span>
        </div>

        <div class="right">
          <div style="margin-left: 1rem"><span style="font-size: 2.25rem">80分</span></div>
          <el-button
            @click="show"
            round
            style="background-color: #e4ecff; color: #3a8bff; margin-top: 0.625rem; width: 90px"
            >强化训练</el-button
          >
        </div>
      </el-card>
    </div>
    <div style="margin-top: 2.1875rem">
      <el-card>
        <div>
          <h1>章节学习情况</h1>
          <div id="myChart" :style="{ width: '800px', height: '550px' }"></div>
        </div>
      </el-card>
    </div>
    <div style="margin-top: 2.1875rem">
      <el-card>
        <div>
          <h1>考试情况分析</h1>
          <div id="myChart2" :style="{ width: '800px', height: '550px' }"></div>
        </div>
      </el-card>
    </div>
    <div style="margin-top: 2.1875rem">
      <el-card>
        <div>
          <h1>讨论情况分析</h1>
          <div id="myChart3" :style="{ width: '800px', height: '550px' }"></div>
        </div>
      </el-card>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.my-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  //   flex-direction: row;
  padding: 10px 20px;

  .left {
    .my-img {
      width: 5rem;
      height: 5rem;
      border-radius: 50%;
      margin-right: 0.625rem;
    }
    .my-name {
      position: relative;
      top: -2.25rem;
      font-size: 1.6625rem;
      margin-left: 0.625rem;
      font-weight: 600;
    }
  }
  .right {
    margin-left: 62.5rem;
    margin-top: -5.125rem;
  }
}
</style>
